<template>
  <el-form  ref="roleForm" size="large" :rules="rules" :model="form">
        <el-form-item label="角色名" prop="roleName">
          <el-input  v-model="form.roleName"></el-input>
        </el-form-item>
    <el-row  justify="center">
      <el-col :span="3"><el-button type="primary" @click="submitForm($refs.roleForm)">保存</el-button></el-col>
      <el-col :span="3"><el-button @click="closeForm">关闭</el-button></el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {addRole, editRole} from '../../../request/system/RoleApi.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
const insert=ref(true)
const form =reactive({
        roleNo:'',
        roleName:''
})
const rest=(isInsert)=>{
  insert.value=isInsert
    roleForm.value.resetFields()
}
const roleForm=ref()
const fillForm=(row)=>{
  console.log(row)
  rest(false)
    form.roleNo= row.roleNo
    form.roleName= row.roleName
}

const emits = defineEmits(['closeRoleForm','submitRoleForm']);
const closeForm=()=>{
    emits("closeRoleForm")
}
const rules=reactive({
        roleName:[
          {
            required: true,message:"角色名不能为空",trigger:'blur'
          }
        ]
          ,
})

const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      if(insert.value){
        addRole(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("新增成功")
            emits("submitRoleForm")
          }
        })
      }else {
        editRole(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("修改成功")
            emits("submitRoleForm")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ rest,fillForm })
onMounted(()=>{


})
</script>
<style scoped>

</style>
